<template>
  <div class="inputaContainer">
    <input
      class="inputaInput"
      type="text"
      name="text"
      :placeholder="props.placeholder"
      v-model="inputValue"
      @keydown.enter="handleClick"
    />
    <button class="inputaBtn" type="button" @click="handleClick">
      <Search class="inputaBtnIcon" />
      <p>{{ i18nt.buttons.search }}</p>
    </button>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import { Search } from "@element-plus/icons-vue";
import { msgbox } from "@/utils/msgboxutils";

const inputValue = ref("");

defineExpose({
  inputValue,
});

const props = defineProps({
  placeholder: {
    type: String,
    required: false,
    default: "...",
  },
  func: {
    type: Function,
    required: false,
    default: () => {},
  },
});

const handleClick = (_: MouseEvent | KeyboardEvent) => {
  props.func();
  msgbox.success(`按下了搜索，你输入了“${inputValue.value}”！`);
};

watch(inputValue, (newVal) => {
  if (typeof newVal === "string") {
    inputValue.value = newVal.trim().replace(/^"|"$/g, "");
  }
});
</script>

<style scoped lang="scss">
.inputaContainer {
  @include rel_cen_hw(50px, 695px);
  flex-direction: row;
  .inputaInput {
    @include relative_hw(50px, 575px);
    box-sizing: border-box; /* 确保尺寸包括 padding 和 border */
    padding: 0 0 0 20px; /* 清除默认 padding */
    border: 1px solid #035db9;
    border-radius: 10px 0px 0px 10px;
    transition: all 0.3s ease;
    &:focus {
      border-color: #035db9; /* 选中时 border 颜色 */
      border-radius: 15px 0px 0px 15px; /* 选中时 border-radius */
    }
  }
  .inputaBtn {
    @include rel_cen_hw(100%, 120px);
    border-radius: 0px 10px 10px 0px;
    background-color: #035db9;

    .inputaBtnIcon {
      color: #ffffff;
      width: 23.72px;
      height: 25.05px;
      margin-right: 11px;
    }
    p {
      color: #ffffff;
      font-size: 16px;
    }
  }

  .inputaInput,
  .inputaBtn {
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
